<template>
  <canvas id="Timelines" style="width: 100%; height: 60px" ref="canvas"></canvas>
</template>

<script>
  import Timeline from '@losting/timeline';

  export default {
    name: 'TimeSlider',
    props: {
      startTime: {
        type: String,
        default: ''
      },
      endTime: {
        type: String,
        default: ''
      },
      areas: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        timeline: null
      };
    },
    mounted() {
      this.createTimeSlider();
    },
    watch: {
      areas: {
        handler(val, oldVal) {
          console.log('val, oldVal', val, oldVal);
          if (val[0] && oldVal[0]) {
            const newVal = val[0];
            const old = oldVal[0];
            if (newVal.startTime === old.startTime && newVal.endTime === old.endTime) {
              return;
            }
          }
          this.createTimeSlider();
        },
        deep: true
      }
    },
    methods: {
      createTimeSlider(val) {
        // console.log('this.areas', this.areas, currentTime);
        let currentTime = Date.now();
        if (this.areas[0] && this.areas[0].startTime) {
          currentTime = new Date(this.areas[0].startTime).valueOf();
          const computedAreas = this.areas.map(({ startTime, endTime }) => ({
            startTime: new Date(startTime).valueOf(),
            endTime: new Date(endTime).valueOf(),
            bgColor: 'rgba(82,147,238,1)'
          }));
          console.log(currentTime, 'currentTime');
          const { width, height } = this.$refs.canvas.getBoundingClientRect();
          const timeline = new Timeline('#Timelines', {
            fill: false,
            width: width,
            height: height,
            fps: 100,
            areaBgColor: 'rgba(82,147,238,1)',
            pointColor: '#f897aa',
            timeSpacingList: [1000, 10000, 60000, 600000, 3600000, 86400000]
          });
          // 自定义绘制
          timeline.draw({
            currentTime: currentTime,
            areas: computedAreas
          });
          timeline.on('dragged', (timestamp) => {
            this.$emit('timeChange', timestamp);
            // ...
          });
          // currentTime = new Date(this.areas[0].startTime).valueOf();
          // // console.log('this.areas', this.areas, currentTime);
          // const { width, height } = this.$refs.canvas.getBoundingClientRect();
          // this.timeline = new Timeline('#Timelines', {
          //   fill: false,
          //   width: width,
          //   height: height,
          //   fps: 100,
          //   areaBgColor: 'rgba(82,147,238,1)',
          //   pointColor: '#f897aa',
          //   timeSpacingList: [1000, 10000, 60000, 600000, 3600000, 86400000]
          // });
          // const computedAreas = this.areas.map(({ startTime, endTime }) => ({
          //   startTime: new Date(startTime).valueOf(),
          //   endTime: new Date(endTime).valueOf(),
          //   bgColor: 'rgba(82,147,238,1)'
          // }));
          // console.log('this.areas', computedAreas);
          // this.timeline.draw({
          //   currentTime: currentTime,
          //   areas: computedAreas
          // });
          // this.timeline.on('dragged', (timestamp) => {
          //   this.$emit('timeChange', timestamp);
          // });
        } else {
          const { width, height } = this.$refs.canvas.getBoundingClientRect();
          this.timeline = new Timeline('#Timelines', {
            fill: false,
            width: width,
            height: height,
            fps: 100,
            areaBgColor: 'rgba(82,147,238,1)',
            pointColor: '#f897aa',
            timeSpacingList: [1000, 10000, 60000, 600000, 3600000, 86400000]
          });
        }

        // console.log('this.areas', width, height, this.$refs.canvas.getBoundingClientRect());
        // if (this.timeline) {
        //   // this.timeline.off('*');
        //   this.timeline.off('dragged');
        //   this.timeline = null;
        // }

        // console.log('this.areas', this.timeline.draw(), this.timeline.on());
      }
    }
  };
</script>
